<template>
  <view class="margin-sm">
      <view class="skill-sequence-panel-content-wrapper">
<!--        左边虚化-->
<!--        <view class="hide-content-box hide-content-box-left"></view>-->
<!--        右边虚化-->
<!--        <view class="hide-content-box hide-content-box-right"></view>-->
        <scroll-view scroll-x="true" class="kite-classify-scroll">
          <view class=" kite-classify-cell" v-for="(item, index) in curriculum" :key="index"  @tap.stop="redirectHw(item.url)">
            <view class="nav-li">
              <view class="flex">
                <view class="flex-twice">
                  <view class="sub-txt">{{item.name}}</view>
                  <view class="two-txt">{{item.content}}</view>
                </view>
                <view class="flex-sub">
                  <img class="b-img" :src="item.img"/>
                </view>
              </view>

<!--              <view class="cu-avatar text-orange round margin-right fl my-icon" :class="'cuIcon-' + item.cuIcon"></view>-->
<!--              <view class="text-bold fl margin-top-xs text-shadow text-white" style="float:revert">{{item.name}}</view>-->
<!--              <viwe class="text-grey text-sm margin-top-xs fl text-shadow text-white  text-cut" style="width: 150px;" >{{item.content}}</viwe>-->
            </view>
          </view>
        </scroll-view>
      </view>

  </view>
</template>

<script setup lang="ts">

import {onMounted, computed, reactive, ref} from 'vue'
import {onLoad, onReady, onShow,onLaunch} from '@dcloudio/uni-app';

import IndexTools from "./IndexTools.vue";
import IndexMsg from "./IndexMsg.vue";
import IndexOrderStastic from "./indexOrderStastic.vue";
import {redirectLoginPage} from '@/common/utils/redirectPage'

import {useStore} from "@/common/store";
import IndexSearch from "./indexSearch.vue";
import IndexSwipper from "./indexSwipper.vue";
const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)

const curriculum = ref([
      {
        name: '会员权益',
        content: '享受尊贵会员权益',
        cuIcon: 'shop',
        url: '/pages_packages/home/quanyiIndex',
        img:'../../static/images/jf.png'
      },
      {
        name: '礼品兑换',
        content: '推荐用户有折扣',
        cuIcon: 'goods',
        url: '/pages_packages/home/giftIndex',
        img:'../../static/images/lw.png'
      },
      {
        name: '梵好圈子',
        content: '沟通交流平台',
        cuIcon: 'friend',
        url: '',
        img:'../../static/images/lw.png'
      },
      {
        name: '热门任务',
        content: '任务得积分',
        cuIcon: 'redpacket',
        url: '',
        img:'../../static/images/jf.png'
      },
    ])

const redirectHw = (url) =>{
  if (!url) {
    uni.showToast({
      title: '功能正在开发中，敬请期待',
      duration: 2000,
      icon: 'none'
    });
  }

  uni.navigateTo({
    url: url
  })
}
  
// const redirectPage = (url) => {
//   uni.navigateTo({
//     url: url
//   })
// }
</script>

<style lang="scss" scoped>

/*scroll-view外层*/
.skill-sequence-panel-content-wrapper {
  position: relative;
  white-space: nowrap;
  padding: 10rpx 0 10rpx 10rpx;
}


/*左右渐变遮罩*/
.hide-content-box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 10px;
  z-index: 2;
}

.hide-content-box-left {
  left: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
}

.hide-content-box-right {
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
}

.kite-classify-scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.kite-classify-cell {
  display: inline-block;
  width: 356rpx;
  margin-right: 20rpx;
  background-color: #F6F6F6;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
}



// .nav-name {
//   font-size: 28upx;
//   text-transform: Capitalize;
//   margin-top: 20upx;
//   position: relative;
// }

// .nav-name::before {
//   content: '';
//   position: absolute;
//   display: block;
//   width: 40rpx;
//   height: 6rpx;
//   background: #fff;
//   bottom: 0;
//   right: 0;
//   opacity: 0.5;
// }

// .nav-name::after {
//   content: '';
//   position: absolute;
//   display: block;
//   width: 100rpx;
//   height: 1px;
//   background: #fff;
//   bottom: 0;
//   right: 40rpx;
//   opacity: 0.3;
// }

// .nav-content {
//   width: 100%;
//   padding: 15rpx;
//   display: inline-block;
//   overflow-wrap: break-word;
//   white-space: normal;
// }

// .nav-btn {
//   width: 200rpx;
//   height: 60rpx;
//   margin: 8rpx auto;
//   text-align: center;
//   line-height: 60rpx;
//   border-radius: 10rpx;
// }
.bg-index {
  color: white;
  background-color:#DAA520;
}
	.mainBox {
		width: 750rpx;
		height: 300rpx;
		padding: 0 5%;
		margin-bottom: 10rpx;

		.mainBtn {
			width: 45%;
		}
	}

	.radius {
		border-radius: 18rpx !important;
	}

	.nav-li {
	  // padding: 30upx;
	  border-radius: 12upx;
	  width: 40%;
	  /*background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);*/
	  background-size: cover;
	  background-position: center;
	  position: relative;
	  z-index: 1;
	  padding:20rpx;
	  width: 100%;
	}

	.nav-li.cur {
	  color: #fff;
	  background: rgb(94, 185, 94);
	  //box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
	  font-size: 32upx;
	  font-weight: 300;
	}

	.nav-title::first-letter {
	  font-size: 40upx;
	  margin-right: 4upx;
	}

	.nav-name {
	  font-size: 28upx;
	  text-transform: Capitalize;
	  margin-top: 20upx;
	  position: relative;
	}

	.nav-name::before {
	  content: "";
	  position: absolute;
	  display: block;
	  width: 40upx;
	  height: 6upx;
	  background: #fff;
	  bottom: 0;
	  right: 0;
	  opacity: 0.5;
	}

	.nav-name::after {
	  content: "";
	  position: absolute;
	  display: block;
	  width: 100upx;
	  height: 1px;
	  background: #fff;
	  bottom: 0;
	  right: 40upx;
	  opacity: 0.3;
	}

	.nav-name::first-letter {
	  font-weight: bold;
	  font-size: 36upx;
	  margin-right: 1px;
	}

	.nav-li text {
	  position: absolute;
	  right: 30upx;
	  top: 30upx;
	  font-size: 52upx;
	  width: 60upx;
	  height: 60upx;
	  text-align: center;
	  line-height: 60upx;
	}

	.text-light {
	  font-weight: 300;
	}

.sub-txt{
  color: #545454;
  font-size: 34rpx;
  margin: 20rpx 0rpx;
}
.two-txt{
  font-size: 24rpx;
  color: #B6B6B6;
}
.b-img{
  width: 140rpx;
  height: 140rpx;
}

</style>
